<template>
	<div class="home">
		<el-row :gutter="20">
			<el-col :xs="24" :sm="12" :md="18" :lg="18" :xl="18" class="grid-content">
				<div class="home-title"> 您好<el-tag :size="size">{{userInfo.username}}</el-tag>欢迎来到 {{title}}</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" class="grid-content">

			</el-col>
		</el-row>
		<el-card>
			<el-row :gutter="20">
				<el-col :xs="24" :sm="12" :md="7" :lg="6" :xl="5" class="grid-content">
					<lzCard :style="{background: 'linear-gradient(to right, #5171fd, #c97afd)',boxShadow:'0 5px 10px #c97afd'}" titleIcon="el-icon-data-line" title="总销量额" 
					:delay="0" :endVal="36254" :options="{prefix: '￥',suffix: '万',useGrouping: true,useEasing:true}" describe="同比增长6%"
					></lzCard>
				</el-col>
				<el-col :xs="24" :sm="12" :md="7" :lg="6" :xl="5" class="grid-content">
					<lzCard :style="{background: 'linear-gradient(to right, #3dadf6, #737bfc)',boxShadow:'0 5px 10px #737bfc'}" titleIcon="el-icon-data-line" title="总销量额"
					:delay="0" :endVal="36254" :options="{prefix: '￥',suffix: '万',useGrouping: true,useEasing:true}" describe="同比增长6%"
					></lzCard>
				</el-col>
				<el-col :xs="24" :sm="12" :md="7" :lg="6" :xl="5" class="grid-content">
					<lzCard :style="{background: 'linear-gradient(to right, #ea677c, #ef9b5f)',boxShadow:'0 5px 10px #ef9b5f'}" titleIcon="el-icon-data-line" title="总销量额"
					:delay="0" :endVal="36254" :options="{prefix: '￥',suffix: '万',useGrouping: true,useEasing:true}" describe="同比增长6%"
					></lzCard>
				</el-col>
				<el-col :xs="24" :sm="12" :md="7" :lg="6" :xl="5" class="grid-content">
					<lzCard :style="{background: 'linear-gradient(to right, #42d79b, #a6e25f)',boxShadow:'0 5px 10px #a6e25f'}" titleIcon="el-icon-data-line" title="总销量额"
					:delay="0" :endVal="36254" :options="{prefix: '￥',suffix: '万',useGrouping: true,useEasing:true}" describe="同比增长6%"
					></lzCard>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<ul class="icon-list">
					<li class="list-li">
						<div class="li-title ">
							<i class="el-icon-platform-eleme"></i>
						</div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-delete-solid"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-s-tools"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-platform-eleme"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-delete-solid"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-s-tools"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-platform-eleme"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-delete-solid"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-s-tools"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-platform-eleme"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-delete-solid"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-s-tools"></div>
						<div class="li-footer">测试</div>
					</li>
					<li class="list-li">
						<div class="li-title el-icon-s-tools"></div>
						<div class="li-footer">测试</div>
					</li>
				</ul>
			</el-row>
		</el-card>
		
		
		<!-- <el-row :gutter="20">
			<el-col :xs="24" :sm="12" :md="7" :lg="7" :xl="7" class="grid-content">
				<el-card>
					<ve-line :data="echart.line"></ve-line>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="12" :md="7" :lg="7" :xl="7" class="grid-content">
				<el-card>
					<ve-pie :data="echart.pie.data" :settings="echart.pie.chartSettings"></ve-pie>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="grid-content">
				<el-card>
					<ve-histogram :data="echart.histogram.data" :settings="echart.histogram.chartSettings">
					</ve-histogram>
				</el-card>
			</el-col>
		</el-row> -->
		当前版本{{version}}
	</div>
</template>

<script>
	import lzCard from '@/components/lzCard/lzCard';
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import theme from '/static/echarts/theme.json'
	export default {
		computed: {
			...mapState({
				title: state => state.settings.title,
			}),
			...mapGetters(['size', 'version', 'userInfo'])
		},
		components: {
			lzCard
		},
		name: 'Home',
		data() {
			return {
				ICountUp:{
					options: {
						useEasing: true,//简化动画（true）
						useGrouping: true,//是否使用分组，分组后每三位会用一个符号分隔
						separator: ',',//分组分隔符（'，'）
						decimal: '.',
						decimalPlaces: 0,//保留几位小数
						prefix: '￥',//前缀
						suffix: 'ee'//后缀
					},
				},
				
				echart: {
					line: { //折线图
						columns: ['日期', '访问用户', '下单用户', '下单率'],
						rows: [{
								'日期': '1/1',
								'访问用户': 1393,
								'下单用户': 1093,
								'下单率': 0.32
							},
							{
								'日期': '1/2',
								'访问用户': 3530,
								'下单用户': 3230,
								'下单率': 0.26
							},
							{
								'日期': '1/3',
								'访问用户': 2923,
								'下单用户': 2623,
								'下单率': 0.76
							},
							{
								'日期': '1/4',
								'访问用户': 1723,
								'下单用户': 1423,
								'下单率': 0.49
							},
							{
								'日期': '1/5',
								'访问用户': 3792,
								'下单用户': 3492,
								'下单率': 0.323
							},
							{
								'日期': '1/6',
								'访问用户': 4593,
								'下单用户': 4293,
								'下单率': 0.78
							}
						]
					},
					histogram: { //柱状图
						chartSettings: { //配置项
							axisSite: {
								right: ['下单率']
							},
							yAxisType: ['KMB', 'percent'],
							yAxisName: ['数值', '比率']
						},
						data: { //数据项
							columns: ['日期', '访问用户', '下单用户', '下单率'],
							rows: [{
									'日期': '1/1',
									'访问用户': 1393,
									'下单用户': 1093,
									'下单率': 0.32
								},
								{
									'日期': '1/2',
									'访问用户': 3530,
									'下单用户': 3230,
									'下单率': 0.26
								},
								{
									'日期': '1/3',
									'访问用户': 2923,
									'下单用户': 2623,
									'下单率': 0.76
								},
								{
									'日期': '1/4',
									'访问用户': 1723,
									'下单用户': 1423,
									'下单率': 0.49
								},
								{
									'日期': '1/5',
									'访问用户': 3792,
									'下单用户': 3492,
									'下单率': 0.323
								},
								{
									'日期': '1/6',
									'访问用户': 4593,
									'下单用户': 4293,
									'下单率': 0.78
								}
							]
						}
					},
					pie: {
						chartSettings: { //配置项
							roseType: 'radius'
						},
						data: { //数据项
							columns: ['日期', '访问用户'],
							rows: [{
									'日期': '1/1',
									'访问用户': 1393
								},
								{
									'日期': '1/2',
									'访问用户': 3530
								},
								{
									'日期': '1/3',
									'访问用户': 2923
								},
								{
									'日期': '1/4',
									'访问用户': 1723
								},
								{
									'日期': '1/5',
									'访问用户': 3792
								},
								{
									'日期': '1/6',
									'访问用户': 4593
								}
							]
						}
					}

				}
			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>
<style scoped="scoped" lang="scss">
	.home {
		height: 100%;
		.home-title {
			font-size: 14px;
		}
		.icon-list{
			display: flex;flex-wrap: wrap;border-left: 1px solid #eee;padding: 0;
			.list-li{
				 text-align: center;color: #666; font-size: 14px; border-right: 1px solid #eee;border-top: 1px solid #eee;
				border-bottom: 1px solid #eee;margin-right: -1px;margin-bottom: -1px;height:180px;width: 20%;cursor: pointer;
				display: flex;flex-direction: column;align-items: center;justify-content: center;
				.li-title{
					display: flex;justify-content: center;font-size: 45px;color: #409EFF;margin-bottom: 5px;
				}
				.li-footer{
					color: #409EFF;word-break:break-all;padding: 0 5px;box-sizing: border-box;-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;white-space: normal; display: -webkit-box;
				}
			}
		}
	}

	.grid-content {
		margin-bottom: 15px;
	}
</style>
